Technical Field
This application relates generally to distributed data processing systems and to the delivery of web content over computer networks.
Brief Description of the Related Art
The client-server model for obtaining content over a computer network is well-known in the art. In a typical system, a host server makes content (e.g., website content) available to requesting clients. The client device sends a request for a given piece of content (e.g., an HTML document, or embedded objects such as images, scripts, etc.). The server responds to the client with the requested content.
In the past, most client devices were desktop computers, and thus existed within a fairly narrow set of form-factors, feature-sets, capabilities, and the like. More recently, however, the scope and diversity of client devices has rapidly expanded, due largely though not exclusively to the proliferation of mobile devices. For example, smartphones are available in an increasingly wider array of shapes and sizes. Tablets are also increasingly popular. But web content originally authored for desktop devices is often subpar for mobile devices, which generally have smaller screen sizes and often reduced—or at least very diverse—set of capabilities.
The issue extends beyond mobile devices, it should be noted. For example, televisions and other connected devices are also increasingly web-enabled, whether or not using wireless or wireline connections. Delivering content to these client devices can present similar challenges. For convenience, the description herein will often refer to mobile client devices; however, the teachings hereof are not so limited.
Typically, web content has been adapted for mobile devices through the authoring process (e.g., a web designer authoring several versions of content in the first instance, in some cases making a “desktop” version of a website and a “mobile” or “m.dot” version of the site), or through an automated transcoding process. While content adaptation remains one approach for handling such traffic, an alternative approach is multi-device authoring. Multi-device authoring embraces the notion of one version of content and instructions (both on the client and server side) that is meant to handle traffic for more than one kind of device (e.g., desktop, tablet, and smartphone traffic, etc.), displaying the content appropriately in each instance. Preferably, a single version of content and instructions is used for multiple devices, or ideally, all devices.
More recently, the term “Responsive Design”, also known as “Adaptive Design”, has been popularized to refer to a multi-device authoring approach for web design. Responsive Design refers to web design that speaks to the problem of addressing a variety of client devices (mobile devices, tablets, desktop, connected devices, etc.), using, e.g., certain enhanced design principles and functionality.
Non-limiting examples of Responsive Design principles and features are listed below.                CSS3 Media Queries, allowing a client device to selectively apply cascading style sheet (CSS) blocks using logic dependent on, for example, client device characteristics. A collection of such media-query dependent blocks in the same page styling can then make the page adapt to different devices or desktop window sizes. A media query typically contains a logical expression which evaluates to true or false. The associated block of CSS rules will be applied (or not) based on the client device's evaluation of the expression. An example of a CSS media query is as follows:                    @media (min-width: 500px) and (orientation: landscape) {[CSS rules]}                        In this example, if the client device has a minimum screen width of 500 pixels and the screen orientation is landscape, the enclosed CSS rules will be applied. Otherwise, they will be ignored.        Fluid Grid, giving designers a system to deal with grid layout reliably across browsers, and encouraging the expression of all units in percentage terms.        Fluid Images, giving designers a technical way to resize images with nice graphical treatment across browsers, removing the need to bring an image into an image editor to get good resizing treatment.        
These features are typically found on newer browsers, although in some instances, Javascript libraries have also appeared that “back port” such functionality to older web browsers, so they are not limited to certain browsers. Websites employing these principles often target the wave of smartphones, tablets, televisions, and other devices that offer HTML4 and HTML5 web browsers. Indeed, sites employing this kind of design are sometimes referred to as “HTML5 sites.”
While multi-device authoring is convenient for creating and maintaining content, performance can be an issue. Websites built in this fashion tend to push the same payload to both desktop and mobile devices, and this payload tends to represent the size required to render on the desktop's larger screen. Furthermore, the payload tends to be higher than normal web pages as multiple CSS or other instructions are included.
There is a need to enhance performance of content authored for multiple devices, and in particular sites using Responsive Design principles. The teachings hereof address this need and offer other advantages and functionality that will become clearer in view of this disclosure.